<template>
  <div class="container">
    登录名：
    <el-input v-model="query.account" placeholder="请输入登录名" class="item" style="width: 200px"></el-input>
    状态：
    <el-select v-model="query.state" placeholder="请选择状态" class="item" style="width: 200px">
      <el-option label="有效" value="1"></el-option>
      <el-option label="无效" value="0"></el-option>
    </el-select>
    <el-button type="primary" @click="search" class="item">查询</el-button>
  </div>
  <RocList :data="table.data"
           :columns="table.columns"
           :pageSize="table.pageSize"
           :total="table.total"
           :operate="true"
           @pageChange="pageChange"
           @pageSizeChange="pageSizeChange"
           @edit="edit"
           @view="view"
           @delete="handleDelete">
  </RocList>
</template>

<script setup>
import {ref, reactive, onMounted, getCurrentInstance} from 'vue'
import {ElMessage} from 'element-plus';
import RocList from '@/components/RocList';
import Url from "@/consts/Url";
import {useRouter} from 'vue-router';
import {RESPONSE_ERROR_CODE} from '@/consts/Codes'
import TableService from "@/service/TableService";

const router = useRouter();

//获取上下文代理，目的是为了使用request
const {proxy} = getCurrentInstance();

//table对象
const table = reactive({
  total: 1,
  data: [],
  currentPage: 1,
  rows: 10,
  columns: [
    {prop: 'account', label: '登录名'},
    {prop: 'name', label: '用户名'},
    {prop: 'state', label: '状态', width: 100}
  ]
});

const query = reactive({
  account: ''
});

//加载table数据
const loadTableData = async () => {
  try {
    let params = {
      page: table.currentPage,
      rows: table.rows,
      account: query.account,
      state: query.state
    };
    const response = await TableService.list(params);
    if (response.code === RESPONSE_ERROR_CODE.NO_LOGIN.value) {
      ElMessage.warning(response.message);
      router.push("/login");
    }
    table.data = response.data;
  } catch (error) {
    console.error('Error posting data:', error);
    ElMessage.error(error);
  }
};

//加载table数量
const loadTableCount = async () => {
  try {
    let params = {
      account: query.account,
      state: query.state
    };
    const response = await TableService.count(params);
    table.total = response.data;
  } catch (error) {
    console.error('Error posting data:', error);
  }
};

//页面加载时加载数据
onMounted(() => {
  loadTableData();
  loadTableCount();
});

//处理翻页
function pageChange(page) {
  table.currentPage = page;
  loadTableData();
}

//处理每页数量
function pageSizeChange(pageSize) {
  table.rows = pageSize;
  loadTableData();
}

//编辑
function edit(id) {
  ElMessage.info("Edit click, id=" + id);
}

//查看详情
function view(id) {
  ElMessage.info("View click, id=" + id);
}

//删除
function handleDelete(id) {
  ElMessage.info("Delete click, id=" + id);
}

function search() {
  loadTableData();
  loadTableCount();
}
</script>


<style scoped>
.container {
  display: flex;
  justify-content: left; /* 水平对齐 */
  align-items: center; /* 垂直对齐 */
}

.item {
  margin: 10px; /* 每个元素之间的间距 */
}
</style>